import React, { Component } from "react";

export default class Count extends Component {

    state = {
      num: 0
    }

    increment = () => {
      this.props.Increment(Number(this.selectNumber.value))
    }
    decrement = () => {
      this.props.Decrement(Number(this.selectNumber.value))    
    }
    incrementIfOdd = () => {
        if (this.props.count%2 === 1) {
          this.props.Increment(Number(this.selectNumber.value))
        }
      }
    incrementAsync = () => {
      this.props.IncrementAsync(Number(this.selectNumber.value), 500)
    }

    render() {
        return (
            <div>
               <h2>当前求和为：{this.props.count}</h2>
               <div>
                   <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                   </select>
                   <button onClick={this.increment}>+</button>
                   <button onClick={this.decrement}>-</button>
                   <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>
                   <button onClick={this.incrementAsync}>异步加</button>
                </div>
            </div>
        )
    }
}